<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
		<style>
			#content{
				max-height: 700px;  
    			overflow-y: auto;  
			}
			li{
				padding:50px 0;
			}
		</style>
	</head>

	<body>
		<div id="content">
			<ul
			  v-infinite-scroll="loadMore"
			  infinite-scroll-disabled="loading"
			  infinite-scroll-distance="50">
			  <li v-for="item in list">{{ item.remark }}{{ item.createTime }}</li>
			  <p v-show="loadings">{{loadText}}</p>
			</ul>
			<br /><br />
		</div>
	</body>
	<!-- 先引入 Vue -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/vue-infinite-scroll@2.0.2/vue-infinite-scroll.js"></script> 
	<script>
		var vue = new Vue({
			el: "#content",
			data: {
				list: [],
				loadings:false,
				page:1,
				loadText:"上拉加载更多"
			},
			
			methods: {
				loadMore() {
				  this.loading = true;
				  this.loadings=true;
				  var self=this;
				  axios.get("http://test.daiqianma.cn/loan/app/managerOrder/managerGoldRecordList.htm",{
			  		params:{
						userId:"f2a7b29e644548bb8cf0a7d2c49e3faf",
						type:2,
						pageNum:self.page,
						pageSize:10
					}
				  }).then(function(data){
				  	console.log(data);
				  	let nums=data.data.result.count;
					let listL=data.data.result.list;
					//数据数量小于一页的数量是，更改文案
					if((nums-10*(self.page-1))<=10){
						self.loadText='没有数据了';
					}else{
						self.loadText="上拉加载更多";
					}
					//把数据push进去
					for(var i=0;i<listL.length;i++){
						self.list.push(listL[i]);
					}
					
					self.page++;
				  });
				  this.loading=false;
//				  self.loadings=false;
//				  setTimeout(() => {
//				    let last = self.list[self.list.length - 1];
//				    for (let i = 1; i <= 40; i++) {
//				      self.list.push(last + i);
//				    }
//				    self.loading = false;
//				  }, 2500);
//				  console.log(this.list);
				}
			},
		})
	</script>

</html>